<template>
    <div class="wrapper">
      <h2>其 他 捐 赠 方 式</h2>
      <div class="time">
        <label style="font-size: small">2022-04-08 12:00</label>
        <el-button type="text" v-show="!inputInfo" @click="inputInfo=true">已捐赠？ 填写捐赠信息</el-button>
        <el-button type="text" v-show="inputInfo" @click="inputInfo=false">返 回</el-button>
      </div>
      <el-divider></el-divider>
      <div class="content" v-show="!inputInfo">
        <pre>
          <span>实物捐赠</span>
          地址：广西壮族自治区桂林市七星区育才路15号-职师学院-校友办公室

          <span>邮政汇款</span>
          地址：广西壮族自治区桂林市七星区育才路15号
          收款人：职业技术师范学院发展基金
          邮政编码：541004
          注：请捐赠人在附言中注明捐款用途

          <span>支票捐赠</span>
          捐款人若以现金支票的形式为我基金会捐款，请将填写好的现金支票直接寄至如下地址：
          地址：山东省济南市南辛庄西路336号
          收款人：济南大学教育发展基金会
          注：请随信附上捐款用途和捐赠人的电话和通信地址。
        </pre>
      </div>
      <div class="inputInfo" v-show="inputInfo">
        <div class="formWrapper">
          <el-form :model="donation" ref="ruleForm" label-width="20%" size="mini">
            <el-form-item label="真实姓名" prop="name" >
              <el-input v-model="donation.realName"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex" >
              <el-radio-group v-model="donation.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="phone" >
              <el-input v-model="donation.phone"></el-input>
            </el-form-item>
            <el-form-item label="入学院系" prop="college" >
              <el-input v-model="donation.college"></el-input>
            </el-form-item>
            <el-form-item label="校友身份/其他" prop="identity" >
              <el-select v-model="donation.isAlumni" placeholder="请选择您的身份">
                <el-option label="校友" :value="1"></el-option>
                <el-option label="其他" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入学年份" prop="enrollmentYear" >
              <el-date-picker
                v-model="donation.enrollmentYear"
                type="year"
                placeholder="选择入学年份">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="捐赠备注" prop="remarks" >
              <el-input v-model="donation.donationName"></el-input>
            </el-form-item>
            <el-form-item label="相对母校说" prop="describe">
              <el-input type="textarea" v-model="donation.details"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="text-align: center">
          <el-button type="primary" @click="submitDonation">提 交</el-button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "OtherDonation",
        data(){
            return{
                inputInfo: false,
                donation: {
                    realName: '',
                    sex: '',
                    phone: '',
                    college: '',
                    enrollmentYear: '',
                    donationName: '',
                    donationObject: '职业技术师范学院',
                    details: '',
                    donationType: 0,
                    isAlumni: 0,
                    alumniId: null,
                    createBy: 0,
                    createTime: ''
                },
                currentUser: {},
                alumni: {},
                oldInfo: ''
            }
        },
        methods: {
            getAlumni(){
                if(!this.currentUser){
                    this.oldInfo=JSON.stringify(this.donation);
                    return false;
                }
                const params={alumniId: this.currentUser.alumniId};
                this.getRequest('/getAlumniDetail', params).then(res=>{
                    if(res){
                        this.alumni=res;
                        this.donation.realName=res.realName;
                        this.donation.sex=res.sex;
                        this.donation.phone=this.currentUser.phone;
                        this.donation.isAlumni=1;
                        this.donation.alumniId=res.alumniId;
                        this.donation.college=res.college.collegeName;
                        this.donation.enrollmentYear=this.alumni.admissionDate;
                    }else{
                        console.log('获取当前校友信息失败!');
                    }
                    this.oldInfo=JSON.stringify(this.donation);
                })
            },
            submitDonation(){
                if(this.donation.donationName==='' || this.donation.details==='' || this.donation.realName===''){
                    this.$message.error('请输入所有关键信息！');
                    return false;
                }
                if (this.donation.phone===''){
                    this.$message.error('请输入您的手机号码');
                    return false;
                }
                this.donation.createBy=this.currentUser ? this.currentUser.userId : 0;
                this.donation.createTime=this.datetime2string(new Date());
                this.postRequest('/addDonation', this.donation).then(res=>{
                    if(res){
                        this.$message.success('提交成功！');
                        this.donation=JSON.parse(this.oldInfo);
                    }else{
                        this.$message.error('操作失败！');
                    }
                })
            }
        },
        created() {
            const user=sessionStorage.getItem('currentUser');
            this.currentUser=JSON.parse(user);
            this.getAlumni();
        }
    }
</script>

<style scoped>
  .wrapper{
    padding-left: 5%;
  }
  h2{
    text-align: center;
    margin: 30px 0;
    color: #0057A7;
  }
  .time .el-button{
    float: right;
  }
  .el-divider{
    margin: 10px 0;
  }
  .content{
    line-height: 1.5em;
    font-size: large;
  }
  span{
    font-weight: bold;
  }
  pre{
    all: initial;
    white-space: pre-line;
  }
  .formWrapper{
    width: 60%;
    margin: 0 auto;
  }
  .inputInfo .el-button{
    width: 100px;

  }
</style>
